<template>
  <t-card class="list-card-container">
      <t-form :data="searchParams" layout="inline" @submit="handleSearch">
        <t-form-item v-for="field in searchFields" :key="field.prop" :label="field.label">
          <t-input
            v-if="field.type === 'input'"
            v-model="searchParams[field.prop]"
            :placeholder="field.placeholder"
            clearable
          />
          <t-select
            v-else-if="field.type === 'select'"
            v-model="searchParams[field.prop]"
            :placeholder="field.placeholder"
            clearable
          >
            <t-option
              v-for="option in selectOptions[field.prop]"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </t-select>
        </t-form-item>
        <t-form-item>
          <t-button type="submit" theme="primary" @click="handleSearch">查询</t-button>
          <t-button type="reset" variant="base" theme="default" @click="resetSearch">重置</t-button>
        </t-form-item>
      </t-form>
      <t-col :span="12" style="text-align: right">
        <t-button theme="primary" @click="openDialog()">新增</t-button>
      </t-col>

    <t-table
      :data="tableData"
      :columns="tableColumns"
      row-key="id"
      vertical-align="top"
      :hover="true"
      :loading="tableLoading"
    >
      <template #operation="{ row }">
        <t-space>
          <t-link theme="primary" @click="openDialog(row)"> 编辑</t-link>
          <t-link theme="danger" @click="deleteData(row.id)"> 删除</t-link>
        </t-space>
      </template>
    </t-table>
    <t-pagination
      v-model:current="page.pageCurrent"
      v-model:pageSize="page.pageSize"
      :total="page.total"
      @change="handlePageChange"
    />

    <t-dialog v-model:visible="dialogVisible" :header="isEdit ? '编辑' : '新增'">
      <t-form :data="formData" :rules="formRules" ref="formRef">
        <t-form-item
          v-for="field in formFields"
          :key="field.prop"
          :label="field.label"
          :name="field.prop"
        >
          <t-input v-if="field.type === 'input'" v-model="formData[field.prop]" :style="{ width: field.width }" :placeholder="field.placeholder" />
          <t-select
            v-else-if="field.type === 'select'"
            v-model="formData[field.prop]"
            :style="{ width: field.width }" 
            :placeholder="field.placeholder"
            clearable
          >
            <t-option
              v-for="option in field.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </t-select>
        </t-form-item>
      </t-form>
      <template #footer>
        <t-button theme="default" variant="outline" @click="dialogVisible = false">取消</t-button>
        <t-button theme="primary" @click="submitForm">确定</t-button>
      </template>
    </t-dialog>
  </t-card>
</template>


<script>
export default {
  name: 'ListOptions',
};
</script>
<script setup>
import * as apis from '@/api/test'
import { useCrud } from '@/composables/crud';
import { onMounted } from 'vue';
const config = {
  apis,
  formFields: [
    { prop: 'name', label: '名称：', placeholder: '请输入名称', defaultValue: '', type: 'input', width: '300px',
      rules: [{ required: true, trigger: 'blur', message: '名称不能为空' }]
    },
    { prop: 'age', label: '年龄：', placeholder: '请输入年龄', defaultValue: '', type: 'input', width: '300px',
      rules: [{ required: true, trigger: 'blur', message: '年龄不能为空' }]
    },
    { prop: 'status', label: '状态：', placeholder: '请选择状态', defaultValue: '', type: 'select', width: '300px',
      rules: [{ required: true, trigger: 'change', message: '请选择状态' }],
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ]
    }
  ],
  tableColumns: [
    { colKey: 'name', title: '名称' },
    { colKey: 'age', title: '年龄' },
    { colKey: 'operation', title: '操作', width: 160 },
  ],
  searchFields: [
    { prop: 'name', label: '名称：', placeholder: '请输入名称', defaultValue: '', type: 'input' },
    { prop: 'status', label: '状态：', placeholder: '请选择状态', defaultValue: '', type: 'select',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ]
    },
  ],
  page: {
    pageCurrent: 1,
    pageSize: 10,
    total: 0,
  },
}

const {
  searchFields,
  tableData,
  tableLoading,
  formData,
  dialogVisible,
  isEdit,
  tableColumns,
  formFields,
  searchParams,
  page,
  formRules,
  selectOptions,
  formRef,
  fetchData,
  openDialog,
  submitForm,
  deleteData,
  handleSearch,
  resetSearch,
  handlePageChange,
} = useCrud(config);

onMounted(() => {
  fetchData()
})
</script>